<template></template>

<script setup name="HeatmapCustomData">
import { onMounted } from "vue";
import * as lcjs from "@lightningchart/lcjs";

const {
  lightningChart,
  PalettedFill,
  LUT,
  regularColorSteps,
  emptyLine,
  Themes,
} = lcjs;

const resolutionX = 400;
const resolutionY = 400;

let originalData = [
  [6, 7, 6, 8],
  [6, 7, 6, 8],
  [6, 7, 6, 8],
  [6, 7, 6, 8],
];
originalData = originalData[0].map((_, colIndex) =>
  originalData.map((row) => row[colIndex])
);
const newWidth = 400;
const newHeight = 400;
const interpolatedData = bilinearInterpolation(
  originalData,
  newWidth,
  newHeight
);
onMounted(() => {
  const chart = lightningChart({
    license:
      "0002-n96ucKX1C700BOZwz7IAGHHjEuT4KwDfrkmx7QCyIBztfxcK2B2YdzqRkuyh0bv4JWu/viN/aCm4HYmBbVnGHphV-MEUCIQCoAbM5nVG3lu6EAeoZcsrvewNpdn+DEGKL6UpNeDXEbAIgCV8gVBAZ3XKPAkbuQDarCfg/BnBK4sN+L00cqoYMu5E=",
    licenseInformation: {
      appTitle: "LightningChart JS Trial",
      company: "LightningChart Ltd.",
    },
  })
    .ChartXY({
      theme: Themes.darkGold,
    })
    .setTitle(
      `Heatmap Grid Series ${resolutionX}x${resolutionY} (${(
        (resolutionX * resolutionY) /
        1000000
      ).toFixed(1)} million data points)`
    )
    .setPadding({ right: 40 });

  const theme = chart.getTheme();
  const palette = new LUT({
    units: "°C",
    percentageValues: true,
    steps: regularColorSteps(0, 0.9, theme.examples.intensityColorPalette),
    interpolate: false,
  });

  // createWaterDropDataGenerator()
  // .setRows(resolutionY) // Corrected to match the rows and columns correctly
  // .setColumns(resolutionX)
  // .generate()
  // .then((data) => {
  const heatmap = chart
    .addHeatmapGridSeries({
      columns: resolutionX,
      rows: resolutionY,
      dataOrder: "columns",
    })
    .setStart({ x: 0, y: 0 })
    .setEnd({ x: resolutionX, y: resolutionY })
    .setFillStyle(new PalettedFill({ lut: palette }))
    .setWireframeStyle(emptyLine)
    .invalidateIntensityValues(interpolatedData);

  chart
    .addLegendBox()
    .setAutoDispose({
      type: "max-width",
      maxWidth: 0.3,
    })
    .add(heatmap); // Corrected to add the heatmap instead of the chart
  // });
});
function bilinearInterpolation(data, newWidth, newHeight) {
  const oldWidth = data[0].length;
  const oldHeight = data.length;
  const result = Array.from({ length: newHeight }, () =>
    Array(newWidth).fill(0)
  );

  for (let y = 0; y < newHeight; y++) {
    for (let x = 0; x < newWidth; x++) {
      // 计算对应的原始坐标
      const srcX = (x / newWidth) * (oldWidth - 1);
      const srcY = (y / newHeight) * (oldHeight - 1);

      const x0 = Math.floor(srcX);
      const x1 = Math.min(x0 + 1, oldWidth - 1);
      const y0 = Math.floor(srcY);
      const y1 = Math.min(y0 + 1, oldHeight - 1);

      // 计算插值
      const a = data[y0][x0] * (x1 - srcX) + data[y0][x1] * (srcX - x0);
      const b = data[y1][x0] * (x1 - srcX) + data[y1][x1] * (srcX - x0);
      result[y][x] = a * (y1 - srcY) + b * (srcY - y0);
    }
  }
  return result;
}
</script>
